<template>
	<div class="UploadFile-container">
		<template v-if="innerFileList.length">
			<!-- <transition-group
                class="el-upload-list el-upload-list--picture-card"
                tag="ul"
                name="el-list"
            > -->
			<ul class="el-upload-list el-upload-list--picture-card">
				<li
					v-for="(file, index) in innerFileList"
					:key="file.fileId"
					class="el-upload-list__item is-success"
				>
					<CustomImage
						:ref="'image' + index"
						:src="file.previewUrl"
						class="el-upload-list__item-thumbnail"
						:preview-src-list="getImgList(innerFileList)"
						:z-index="10000"
					/>
					<span class="el-upload-list__item-actions">
						<span
							class="el-upload-list__item-preview"
							@click="handlePictureCardPreview(index)"
						>
							<i class="el-icon-zoom-in"/>
						</span>
						<span
							v-if="!disabled"
							class="el-upload-list__item-delete"
							@click="handleRemove(index)"
						>
							<i class="el-icon-delete"/>
						</span>
					</span>
				</li>
			</ul>
			<!-- </transition-group> -->
		</template>
		<template v-if="!detailed">
			<Upload
				ref="elUpload"
				:http-request="httpRequest"
				action="#"
				:multiple="limit !== 1"
				:show-file-list="false"
				accept="image/*"
				:disabled="disabled"
				list-type="picture-card"
				class="upload-btn"
			>
				<i class="el-icon-plus"/>
			</Upload>
		</template>
		<div
			v-if="tipText"
			slot="tip"
			class="el-upload__tip"
		>
			{{tipText}}
		</div>
	</div>
</template>

<script>
import {magic} from '@lexmis/magic-ui/pc';
import {Image, Upload} from 'element-ui';
const units = {
	KB:1024,
	MB:1024 * 1024,
	GB:1024 * 1024 * 1024,
};
export default {
	name:'McUploadImg',
	components:{
		CustomImage:Image,
		Upload,
	},
	props:{
		value:{
			type:[String, Array],
		},
		type:{
			type:String,
			default:'annexpic',
		},
		disabled:{
			type:Boolean,
			default:false,
		},
		detailed:{
			type:Boolean,
			default:false,
		},
		showTip:{
			type:Boolean,
			default:false,
		},
		limit:{
			type:Number,
			default:0,
		},
		accept:{
			type:String,
			default:'image/*',
		},
		sizeUnit:{
			type:String,
			default:'MB',
		},
		pathType:{
			type:String,
			default:'defaultPath',
		},
		isAccount:{
			type:[Number, String],
			default:0,
		},
		folder:{
			type:String,
			default:'',
		},
		fileSize:{
			type:Number,
			default:10,
		},
		tipText:{
			type:String,
			default:'',
		},
	},
	data(){
		return {
			innerFileList:[],
		};
	},
	computed:{
		params(){
			return {
				pathType:this.pathType,
				isAccount:this.isAccount,
				folder:this.folder,
			};
		},
	},
	mounted(){
		if(!this.value) return;
		magic.core
			.service({
				url:'/api/magic-file/getFileRelation',
				method:'post',
				data:{idList:Array.isArray(this.value) ? this.value : [this.value]},
			})
			.then(({data}) => {
				this.innerFileList = data;
			});
	},
	methods:{
		async httpRequest({file}){
			const isOk = this.beforeUpload(file);
			if(!isOk) return;
			magic.core.uploadFile(file).then((res) => {
				this.handleSuccess(res, file);
				this.$message.success('上传成功');
			});
		},
		beforeUpload(file){
			if(this.innerFileList.length >= this.limit){
				this.handleExceed();
				return false;
			}
			const unitNum = units[this.sizeUnit];
			if(!this.fileSize) return true;
			const isRightSize = file.size / unitNum < this.fileSize;
			if(!isRightSize){
				this.$message.error(`图片大小超过${this.fileSize}${this.sizeUnit}`);
				return isRightSize;
			}
			const isAccept = new RegExp('image/*').test(file.type);
			if(!isAccept){
				this.$message.error(`请上传图片`);
				return isAccept;
			}
			return isRightSize && isAccept;
		},
		handleSuccess(res, file){
			if(this.innerFileList.length >= this.limit) return this.handleExceed();
			this.innerFileList.push({
				fileId:res.fileId,
				previewUrl:URL.createObjectURL(file),
			});
			if(this.limit > 1){
				const ids = this.innerFileList.map((item) => item.fileId);
				this.$emit('input', ids);
				this.$emit('change', ids);
			}else{
				const id = this.innerFileList[0].fileId;
				this.$emit('input', id);
				this.$emit('change', id);
			}
		},
		handleExceed(){
			this.$message.warning(`当前限制最多可以上传${this.limit}张图片`);
		},
		handlePictureCardPreview(index){
			this.$refs['image' + index][0].clickHandler();
		},
		handleRemove(index){
			this.innerFileList.splice(index, 1);
			this.$refs.elUpload.uploadFiles.splice(index, 1);
			if(this.limit > 1){
				const ids = this.innerFileList.map((item) => item.fileId);
				this.$emit('input', ids);
				this.$emit('change', ids);
			}else{
				const id = this.innerFileList[0].fileId;
				this.$emit('input', id);
				this.$emit('change', id);
			}
		},
		getImgList(list){
			const newList = list.map((o) => o.previewUrl);
			return newList;
		},
	},
};
</script>
<style lang="scss" scoped>
.UploadFile-container {
    padding: 0 15px;
    ::v-deep .el-upload-list--picture-card .el-upload-list__item {
        width: 120px;
        height: 120px;
    }
    ::v-deep .el-upload--picture-card {
        width: 120px;
        height: 120px;
        line-height: 120px;
    }
    .upload-btn {
        display: inline-block;
    }
    .el-upload__tip {
        color: #a5a5a5;
        word-break: break-all;
        line-height: 1.3;
        margin-top: 5px;
    }
}
</style>